<template>
  <div
    :id="uid"
    class="AutoIcon"
    :style="{ display: `${block ? '' : 'inline-'}block`, ...innerSize }"
  >
    <svg
      class="icon svg-icon"
      :style="{
        ...innerSize,
        color,
      }"
      aria-hidden="true"
    >
      <use :xlink:href="'#' + icon" />
    </svg>
  </div>
</template>

<script>
// eslint-disable prettier/prettier
import { sleep, $createUid } from "@/utils";
export default {
  name: "AutoIcon",
  props: {
    icon: { type: String, default: undefined },
    size: { type: [String, Number], default: 24 },
    color: { type: String, default: "#121212" },
    block: { type: Boolean, default: false },
  },
  data() {
    return {
      uid: $createUid(),
      innerSize: { fontSize: "auto" },
      IconSize: { width: "auto", height: "auto" },
    };
  },
  created() {},
  mounted() {
    // console.log(this.size);
    let _size = 0;
    try {
      _size = Number(this.size);
    } catch (e) {
      return;
    }
    this.innerSize = { width: _size + "px", height: _size + "px" };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.icon {
  vertical-align: 15%;
  fill: currentColor;
  overflow: hidden;
}
.autoIcon {
  position: relative;
  display: block;
}
</style>
